import React, { useEffect, useState } from 'react';
import './Booklist.css'
import { message } from 'antd';
import { shelf } from '../../assets/api/booksdetail';
export default function Booklist(props) {
  const [man, setman] = useState(false);
  const [list, setlist] = useState([]);
  useEffect(() => {
    message.loading(
      {
        key: 1,
        content: <span>加载中</span>,
        className: "toast",
        duration: 0,
      }
    )
    let newshelf = [];
    props.bookshelf.forEach(ele => {
      newshelf.push({ id: ele, type: "book" })
    });
    if (newshelf.length !== 0) {
      shelf({ ids: JSON.stringify(newshelf) }).then(data => {
        console.log(newshelf);
        console.log(data);
        data.data.list.forEach(ele => {
          ele.check = false;
        })
        message.destroy(1);
        setlist(data.data.list);
      })
    } else {
      message.destroy(1);
    }

  }, []);
  function removebook() {
    let flag = false;
    let newlist = list;
    for (let i = 0; i < newlist.length; i++) {
      if (newlist[i].check) {
        flag = true;
        newlist.splice(i, 1);
        i--;
      }
    }
    props.changebookshelf(newlist);
    if (flag) {
      setman(!man);
      setlist(newlist);
    } else {
      message.info(
        {
          key: 1,
          icon: <></>,
          content: <span>请选择书籍</span>,
          className: "toast",
          duration: 1,
        }
      )
    }
  }
  function changeman() {
    setman(!man);
  }
  function changecheck(index, id) {
    if (man) {
      let newlist = list;
      newlist[index].check = !newlist[index].check;
      setlist(JSON.parse(JSON.stringify(newlist)));
    } else {
      props.changebooksid(id)
    }

  }
  return (
    <div className='booklistbox'>
      <div className="booklisttopbox">
        {
          !man ? <div className='left'></div> :
            <div className="left" onClick={changeman}>取消</div>
        }
        {
          !man ? <div className="right" onClick={changeman}><i className='iconfont icon-xuanze1'></i> 管理</div> :
            <div className="remove" onClick={removebook}><i className='iconfont icon-yichushujia'></i> 移出书架</div>
        }
      </div>
      <div className='booklistbottombox'>
        <div className="booklistflexbox">

          {
            list.length === 0 ? <div className='none'>书架暂无更多书籍</div> :
              list.map((ele, index) =>
              (<div key={index} className="booklistminbox">

                <div className="bookface" onClick={() => changecheck(index, ele.id)}>
                  {
                    man ? <div className="icon" >
                      {
                        ele.check ? <i className='iconfont icon-xuanze checked'></i> : <i className='iconfont icon-xuanze'></i>
                      }
                    </div> : <></>
                  }

                  <img src={ele.cover} alt="" />
                </div>
                <div className="booktitle">
                  {ele.title}
                </div>
              </div>)
              )
          }


        </div>
      </div>
    </div>
  );
}
